<template>
  <div class="biingInfo">
    <van-nav-bar title="账单详情" left-arrow @click-left="onClickLeft" />
    <div class="infoBox">
      <div class="topbox">
        <p class="topTite">交易金额 (元)</p>
        <p class="topMoney">8.10</p>
      </div>
      <div class="mainbox">
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">交易描述</p>
          </template>
          <template #default>
            <p class="cellInfo">网银转入-6214180000024700828</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">收款卡号</p>
          </template>
          <template #default>
            <p class="cellInfo">6227 **** **** 1102</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">交易金额(元)</p>
          </template>
          <template #default>
            <p class="cellInfo">-8.10</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">交易币种</p>
          </template>
          <template #default>
            <p class="cellInfo">人民币</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">交易日期</p>
          </template>
          <template #default>
            <p class="cellInfo">2024-03-04 07:58:47</p>
          </template>
        </van-cell>
        <van-cell class="box" size="large">
          <template #title>
            <p class="cellTitle">记账日期</p>
          </template>
          <template #default>
            <p class="cellInfo">2024-03-04</p>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-icon {
  color: #676565;
}
/deep/.van-nav-bar__title {
  color: #676565;
}
.biingInfo {
  background-color: #5756560d;
  font-size: 0.14rem;
  min-height: 100vh;
}
.infoBox {
  padding: 0 0.16rem;
}
.topbox {
  height: 1rem;
  background-color: #fff;
  text-align: center;
  margin-top: 0.1rem;
  padding-top: 0.4rem;
  border-radius: 0.05rem;
  p {
    margin: 0;
  }
  .topTite {
    font-size: 0.16rem;
    color: #9d9292;
  }
  .topMoney {
    margin-top: 0.1rem;
    font-size: 0.36rem;
    font-weight: 700;
  }
}
.cellTitle {
  color: #9d9292;
}
.cellInfo {
  color: black;
}
.mainbox {
  margin-top: 0.1rem;
  border-radius: 0.05rem;
  p {
    margin: 0;
  }
  .box {
  }
}
.van-cell__title {
  min-width: 30%;
  text-align: left;
}
.van-cell__value {
  min-width: 70%;
  span {
    display: inline-block;
    text-align: left;
    word-break: break-all;
  }
}
</style>
